<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<title>考试中心</title>
	<style type="text/css">
		body{
			min-width: 1200px;
			background-color: #f7f7f7;
		}
		header{
			background-color: #fff;
		}
		.centerBg{
			height: 310px;
		}
		.centerEve{
			width: 1200px;
			margin: 0 auto;
		}
		/*列表头*/
		.examInc{
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 1200px;
			color: #303030;
			top: 147px;
		}
		.examCon{
			background-color: #fff;
			height: 80px;
			line-height: 80px;
			font-size: 15px;
			text-align: center;
		}
		.examCon > div{
			display: inline-block;
    		padding: 0 20px;
		}
		.examCon .examCon_tar{
			color: #2b7cd2;
		}
		/*列表修改样式*/
		.professInc{
			padding: 0;
		}
		.professEve{
			margin-top: 0;
		}

		.centerPage{
			text-align: center;
			background-color: #f7f7f7;
			padding: 40px 0;
		}
		.professEve_sfont{
			height: 20px;
		}
		.blueBtn{
			height: 20px;
    		font-size: 12px;
    		padding: 0 10px;
    		border-radius: 3px;
    		float: right;
		}
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<section id="exam">
			<div class="centerBg">
				<img class="imgBai" src="./img/bg05.jpg">
				<div class="examInc">

					<div class="examCon">
						<div class="examCon_tar" @click="examSw($event,1)">
							学习中
						</div>
						<div @click="examSw($event,2)">
							已学完
						</div>
						<div @click="examSw($event,3)">
							考试中
						</div>
						<div @click="examSw($event,4)">
							已考完
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="profess centerEve">
			<div class="professOutinc centerEveCon_inc">
				<div class="professInc centerConInc">
					<pro-fessional v-for="(proCourse,index) in tpList" :index="index" :id="proCourse.id" :name="proCourse.subjectName" :introduce="proCourse.introduce" :photo="proCourse.photo" :tptype="type" :subjectid="proCourse.subjectId" :score="proCourse.score"></pro-fessional>
				</div>
			</div>
			<div class="centerPage">
				<div id='page'></div>
			</div>
		</section>
		<all-footer></all-footer>
	</div>
</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/initPage.js"></script>
<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript" src="./component/professional.js"></script>
<script type="text/javascript">
    videoVue();

	//首页Vue函数
	function videoVue() {

        var allheader = allHeader();
	    var allfooter = allFooter();
        var professional = proFessional();
        var vm = new Vue({
            el: '#example',
            data: {
                loginInfo:"",
                type:"",
                tpList:""
			},
			mounted:function () {
				this.getUserinfo();
				this.examSw();//切换考试中心列表

            },
			methods:{
				//获取用户信息
				getUserinfo:function(){
					var loginInfo = sessionStorage.getItem("loginInfo");
					if(loginInfo==undefined||loginInfo==null||loginInfo==""){
						alert("你还没有登录，请登录");
						window.location.href='./login.html';
					}else{
						this.loginInfo = JSON.parse(loginInfo);
					}
                    
				},
                //获取考试中心列表(分页)
                tpListSub:function(page,isSw){

                    if(page==""||page==undefined||page==null){
                        page = 0;
					}
					var type = this.type;
					var studentId = this.loginInfo.info.id;
                    var size = 8;
                    var sort = "id,asc";
                    var obj = JSON.stringify({
                        "studentId": studentId,
                        "type": type
                    });
                    httpHelperpost("/api/videoStudentSchedules/tpList?page="+page+"&size="+size+"&sort="+sort, obj, function(isSuccess, data) {
                        if (isSuccess == true) {
                            var response = data.responseText;
                            var value = JSON.parse(response);

                            // console.log(response);

                            if(value.code == 0){
                                vm.tpList = value.data.videoStudentDTOS.content;
                                
                                console.log("查询成功");
                                if($("#page").text()==""){
                                    vm.pageCha(value.data.videoStudentDTOS.totalElements);//初始化分页插件
								}
								if(isSw==true){
                                    $("#page").html("");
                                    vm.pageCha(value.data.videoStudentDTOS.totalElements);//初始化分页插件
								}
                            }else if(value.code==401){
                                alert(value.message);
                                window.location.href='./login.html';
                            }else{
                                alert(value.message);
                                console.log("查询失败");
                            }
                        }else {}
                    });
				},
				//切换考试顶部
				examSw:function(that,index){
                    if(index==undefined||index==null||index==""){
                        
                        this.type = 1;
                        // $(".examCon > div").eq(index-1).addClass("examCon_tar").siblings().removeClass("examCon_tar");
                        // this.type = index;
                        
					}else{
                        $(that.currentTarget).addClass("examCon_tar").siblings().removeClass("examCon_tar");
                        this.type = index;
					}

                    this.tpListSub(null,true);//获取考试中心列表(分页)
				},
                //初始化分页插件
              	pageCha:function (totalCount) {
                  	pageUtil.initPage('page',{
                      	totalCount:totalCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
                      	curPage:1,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                      	showCount:9,//分页栏显示的数量
                      	pageSizeList:[10,20,50,100],//自定义分页数，默认[5,10,15,20,50]
                      	defaultPageSize:12,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                      	isJump:true,//是否包含跳转功能，默认false
                      	isPageNum:false,//是否显示分页下拉选择，默认false
                      	isPN:true,//是否显示上一页和下一面，默认true
                      	isFL:false,//是否显示首页和末页，默认true
                      	jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
							vm.tpListSub(curPage-1,false);
                      	},
                  	});
              	},
                GetRequest:function () {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
                        }
                    }
                    return theRequest;
                }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter,
                'pro-fessional':professional
            }
        })
    }
</script>

</html>